<template>
    <div class="container-content">
        <div class="app-view-box">
            <el-row>
                <el-col :span="24">
                    <h1 class="panel-title">合同模板</h1>
                </el-col>
            </el-row>
            <el-row
                style="margin: 10px 0"
                justify="end"
                class="export-container"
            >
                <el-col :span="1.5" style="margin-right: 10px">
                    <el-button
                        type="primary"
                        icon="el-icon-plus"
                        size="mini"
                        @click="add"
                        >新增
                    </el-button>
                </el-col>
                <el-col :span="8">
                    <el-input
                        v-model="search_value"
                        placeholder="请输入搜索内容"
                        clearable
                        size="small"
                        @keyup.enter.native="getData"
                    />
                    <el-button
                        style="margin-left: 5px"
                        icon="el-icon-search"
                        size="mini"
                        type="primary"
                        @click="getData"
                        >搜索</el-button
                    >
                    <el-button size="mini" @click="reset">重置</el-button>
                </el-col>
            </el-row>
            <div class="container_table">
                <el-table border :data="tableData" style="width: 100%">
                    <el-table-column
                        align="center"
                        type="index"
                        width="50"
                        label="序号"
                    >
                    </el-table-column>
                    <el-table-column prop="tempName" label="模板名称">
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间">
                    </el-table-column>
                    <el-table-column align="center" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-tooltip
                                class="item"
                                effect="dark"
                                content="详情"
                                placement="bottom"
                            >
                                <el-button
                                    plain
                                    icon="el-icon-more"
                                    @click="detail(scope.row)"
                                    size="mini"
                                ></el-button>
                            </el-tooltip>
                            <el-tooltip
                                class="item"
                                effect="dark"
                                content="编辑"
                                placement="bottom"
                            >
                                <el-button
                                    type="primary"
                                    plain
                                    icon="el-icon-edit"
                                    @click="edit(scope.row)"
                                    size="mini"
                                ></el-button>
                            </el-tooltip>
                            <el-tooltip
                                class="item"
                                effect="dark"
                                content="删除"
                                placement="bottom"
                            >
                                <el-button
                                    type="danger"
                                    plain
                                    icon="el-icon-delete"
                                    @click="delete (scope.row, scope.$index)"
                                    size="mini"
                                ></el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <el-pagination
            class="table-pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
        <el-drawer
            :title="rowId ? '编辑合同模板' : '新增合同模板'"
            :visible.sync="drawer"
            :before-close="handleClose"
            direction="rtl"
            size="100%"
            destroy-on-close
        >
            <addEdit :visible.sync="drawer" v-if="isAddEdit" :rowId="rowId" />
            <detail :visible.sync="drawer" v-else :rowId="rowId" />
            <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取 消</el-button>
                <el-button type="primary" @click="submit">保 存</el-button>
            </div>
        </el-drawer>
    </div>
</template>

<script>
// import { getList,getDetail,addInfo,editInfo,deleteInfo } from "@/api/finance";
// import addEdit from './addEdit'
// import detail from './detail'
export default {
    // components:{addEdit,detail},
    data() {
        return {
            search_value: "", //搜索值
            currentPage: 1, //当前页
            pageSize: 10, //每页条数
            total: 0,
            tableData: [],
            rowId: "",
            isAddEdit: true,
            drawer: false,
        };
    },
    methods: {
        //获取list
        async getData() {
            const query = {
                limit: this.pageSize,
                page: this.currentPage,
            };
            let res = await getList(query);
            if (res.code === 200) {
                this.tableData = res.rows;
                this.total = res.total;
            }
        },
        //分页器size
        handleSizeChange(val) {
            this.pageSize = val;
            this.getDataList();
        },
        //分页器当前页
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getDataList();
        },
        add(index, row) {
            this.rowId = "";
            this.isAddEdit = true;
            this.drawer = true;
        },
        edit(index, row) {
            this.rowId = row.id;
            this.isAddEdit = true;
            this.drawer = true;
        },
        detail(index, row) {
            this.rowId = row.id;
            this.isAddEdit = false;
            this.drawer = true;
        },
        delete(index, row) {
            deleteInfo(row.id).then((res) => {
                if (res.code === 200) {
                    this.$message({
                        message: "修改成功",
                        type: "success",
                    });
                    this.getData();
                }
            });
        },
        //重置
        reset() {
            this.search_value = "";
            this.getData();
        },
        //关闭drawer
        handleClose(done) {
            this.$confirm("确定要离开吗？")
                .then((_) => {
                    done();
                })
                .catch((_) => {});
        },
        submit() {
            const cb = () => {
                this.drawer = false;
                this.getData();
            };
            this.$refs.formRef.save(cb);
        },
        //取消drawer
        cancelForm() {
            this.drawer = false;
            this.rowId = "";
            this.getData();
        },
        // 导出按钮
        export() {
            console.log("exporting");
        },
    },

    mounted() {
        this.getData();
    },
};
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    padding: 5px 10px;
    .container_title {
        border-bottom: 1px solid #ccc;
        padding: 10px 0;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .container_title_left {
            display: flex;
            align-items: center;
        }
        .container_title_right {
            .add_btn {
                width: 100px;
            }
        }
    }
    .container_table {
        margin-top: 10px;
    }
}
</style>
